<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static' }"
    (onHidden)="onHidden($event)"
    (onShown)="shown()"
>
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form #editForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        交易记录
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="m-portlet__body" style="border-top: 1px solid #ebedf2;  margin-top: 11px;">
                        <div class="tabbable-line">
                            <div class="tab-content" style="padding-top:0;">
                                <div class="tab-pane active" id="tab-model">
                                    <div class="row align-items-center">
                                        <div
                                            class="primeng-datatable-container"
                                            [busyIf]="primengTableHelper.isLoading"
                                        >
                                            <p-table
                                                #dataTable
                                                (onLazyLoad)="getRecordsIfNeeds($event)"
                                                [value]="primengTableHelper.records"
                                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                [paginator]="false"
                                                [lazy]="true"
                                                [scrollable]="true"
                                                ScrollWidth="100%"
                                                [responsive]="primengTableHelper.isResponsive"
                                                [resizableColumns]="primengTableHelper.resizableColumns"
                                            >
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 40px">
                                                            序号
                                                        </th>
                                                        <ng-container *ngFor="let ext of extensions">
                                                            <th width="{{ ext.width }}">
                                                                {{ ext.title }}
                                                            </th>
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>

                                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                                    <tr>
                                                        <td style="width: 40px">
                                                            {{ i + 1 + paginator.first }}
                                                        </td>
                                                        <ng-container *ngFor="let ext of extensions">
                                                                <ng-container *ngIf="ext.key == 'f_BillItemCode'; else elseTemplate">
                                                                        <td width="{{ ext.width }}">
                                                                            <a style="text-decoration: underline;color: #2739c1;"
                                                                                (click)="
                                                                                billItemDetailModal.show(record)
                                                                                    ">{{
                                                                                record.f_BillItemCode }}
                                                                            </a>
                                                                        </td>
                                                                    </ng-container>
                                                                    <ng-template #elseTemplate>
                                                                       
                                                                            <ng-container [ngSwitch]="ext.formatType">
                                                                                    <ng-container *ngSwitchCase="1">
                                                                                        <td width="{{ ext.width }}">
                                                                                            {{ record[ext.key] | number: '1.0-0' }}
                                                                                        </td>
                                                                                    </ng-container>
                                                                                    <ng-container *ngSwitchCase="2">
                                                                                        <td width="{{ ext.width }}">
                                                                                            {{ record[ext.key] | number: '1.2-2' }}
                                                                                        </td>
                                                                                    </ng-container>
                                                                                    <ng-container *ngSwitchCase="4">
                                                                                        <td width="{{ ext.width }}">
                                                                                            {{
                                                                                                record[ext.key] | momentFormat: 'YYYY-MM-DD'
                                                                                            }}
                                                                                        </td>
                                                                                    </ng-container>
                                                                                    <ng-container *ngSwitchDefault>
                                                                                        <td width="{{ ext.width }}">
                                                                                            {{ record[ext.key] }}
                                                                                        </td>
                                                                                    </ng-container>
                                                                                </ng-container>
                                                                    
                                                                    </ng-template>



                                                        
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>
                                            </p-table>

                                            <div class="primeng-paging-container">
                                                <p-paginator
                                                    [rows]="20"
                                                    #paginator
                                                    (onPageChange)="getRecordsIfNeeds($event)"
                                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                                    [rowsPerPageOptions]="
                                                        primengTableHelper.predefinedRecordsCountPerPage
                                                    "
                                                >
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
  <billItemDetailModal #billItemDetailModal></billItemDetailModal>
</div>
